<!--  -->
<template>
  <div class="ProductType">
    <div class="project-left">
      <!-- 添加开始 -->
      <Addcommom></Addcommom>
      <!-- 添加结束 -->
      <!-- 商品列表开始 -->
      <div class="projeci-list">
        <el-table
          ref="singleTable"
          :data="typeList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column type="index" width="100" label="编号" align="center">
            <template slot-scope="scope">{{scope.row._id}}</template>
          </el-table-column>
          <el-table-column property="date" label="类型名称" align="center">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column property="name" label="属性数量" width="200" align="center">
            <template slot-scope="scope">{{scope.row.numbers}}</template>
          </el-table-column>
          <el-table-column property="address" label="参数数量" width="200" align="center">
            <template slot-scope="scope">{{scope.row.price}}</template>
          </el-table-column>
          <el-table-column property="date" label="设置" width="200" align="center">
            <el-row class="set-btn-box">
              <el-button class="set-btn">属性列表</el-button>
              <el-button class="set-btn">参数列表</el-button>
            </el-row>
          </el-table-column>
          <el-table-column property="name" label="操作" width="200" align="center">
            <el-row class="set-btn-box">
              <el-button class="set-btn operation-btn">编辑</el-button>
              <el-button class="set-btn operation-btn" type="danger">删除</el-button>
            </el-row>
          </el-table-column>
        </el-table>
      </div>
      <!-- 商品列表结束 -->
      <!-- 搜索分页开始 -->
      <div class="paginate">
        <template class="paginate">
          <div class="product-botton-right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10,20,30,40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="typeList.length"
            ></el-pagination>
          </div>
        </template>
      </div>
      <!-- 搜索分页结束 -->
    </div>
  </div>
</template>

<script>
import Addcommom from "./commom/Addcommom";
import axios from "axios";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Addcommom,
  },
  data() {
    //这里存放数据
    return {
      typeList: [],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      /* ------------- */
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /* -------------------------------------分页器 -------------------------------------------------------*/
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    axios
      .post("http://49.233.65.169:3000/api/goodslist", {
        pageSize: 100,
        pageNum: 1,
      })
      .then((res) => {
        this.typeList = res.data;
      });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.ProductType {
  .project-left {
    width: 100%;
    padding: 20px;
    .projeci-list {
      margin-top: 20px;
      .set-btn-box {
        display: flex;
        justify-content: space-between;
        .set-btn {
          width: 80px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          padding: 0;
          font-size: 12px;
        }
        .operation-btn {
          width: 60px;
        }
      }
    }
    .paginate {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      .product-botton-right {
      }
    }
  }
}
</style>